<template>
	<!-- 查看赛果 -->
	<view class="page-content">
		<view class="index-header">
			<!--导航-->
			<w-product-type ref="jstProductType" class="jstProductType" :is-fixed="isFixed" :list="typeList"
				@selectItem="getTypeGoodslist"></w-product-type>
		</view>
		<view class="index-body">
			<!--折叠面板-->
			<uni-collapse ref="add" class="uni-collapse-box warp" @change="change">
				<uni-collapse-item 
				v-for="(sub, key) in list" 
				:key="key" :open="sub.open"
				:show-animation="sub.showAnimation" 
				:title="sub.subName"
				:thumb="key+1"
				:clock_sta="sub.clock_sta"
				:time="sub.time">
					<view class="uni-collapse-content">{{ sub.content }}</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue"
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item2.vue"
	import wProductType from '@/pages/index/components/product-type.vue'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			wProductType
		},
		data() {
			return {
				isFixed: false,
				datalist: [{
					img: '',
					title: '2021春季城市穿越赛',
					time: '2021-04-06',
					statu: '1' 
				}],
				typeList: [{
						id: 1,
						category_name: '青年组'
					},
					{
						id: 2,
						category_name: '老年组'
					},
					{
						id: 3,
						category_name: '成年组'
					},
					{
						id: 4,
						category_name: '情侣组'
					},
					{
						id: 5,
						category_name: '亲子组'
					},
					{
						id: 6,
						category_name: '师生组'
					},
					{
						id: 7,
						category_name: '成年组'
					}
				],
				list: [{
						type: false,
						subName: '秋名山战神队',
						clock_sta:'1',
						time:'1小时10分钟39秒',
						open: true,
						content: '折叠内容主体，可自定义内容及样式'
					},
					{
						type: false,
						subName: '奥德赛队',
						time:'1小时10分钟39秒',
						clock_sta:'1',
						content: '折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。'
					},
					{
						type: false,
						subName: '阿萨德队',
						clock_sta:'2',
						time:'1小时10分钟39秒',
						content: '折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。'
					},
					{
						type: false,
						clock_sta:'2',
						time:'',
						subName: '融合队',
						content: '折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。'
					}
				]
			}
		},
		computed: {},
		methods: {
			getTypeGoodslist(){
				
			},
			change(e) {

			},
			handleActive(e) {
				this.active = e
			},
			//跳转比赛详情
			clickdet(type, item) {
				uni.navigateTo({
					url: `/pages/index/race_detail?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//跳转比赛详情报名
			signUp(type, item) {
				uni.navigateTo({
					url: `/pages/index/race_detail?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//跳转集团详细
			clickcomp(item) {
				uni.navigateTo({
					url: `/pages/index/company_detail?data=${JSON.stringify(item)}`
				})
			}
		},
		onPullDownRefresh() {
			if (this.$refs.indexPage) {
				//this.$refs.indexPage.getData()
				console.log(1231)
			}

		}
	}
</script>

<style lang="scss">
	
	.page-content{
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
	}
	.index-header{
		height: 80rpx;
	}
	.index-body{
		margin: 30rpx;
		background-color: #f5f5f5;
		.uni-collapse-box{
			background-color: #f5f5f5!important;
			
		}
	}
</style>
